<template>
  <div style="width: 100%; height: 100%; display: flex">
    <section class="echartBox-wrapper" ref="id"></section>
    <!-- <span>{{echartsData}}</span> -->
  </div>
</template>

<script>
import echarts from "./index";
export default {
  props: ["id", "echartsData"],
  data() {
    return {};
  },
  created() {},
  watch: {
    echartsData: {
      handler() {
        this.$nextTick(() => {
          this.renderEchart();
        });
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    renderEchart() {
      //2.初始化
      const chart = echarts.init(this.$refs["id"]);
      const option = {
        series: [
          // 外圈
          {
            type: "gauge",
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "90%",
            startAngle: 90,
            endAngle: -270,
            axisLine: {
              lineStyle: {
                color: [[1, "#76EFEA"]],
                width: 2,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            anchor: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          // 中间刻度
          {
            type: "gauge",
            min: 0,
            max: 100,
            splitNumber: 14,
            radius: "90%",
            x: "10%",
            startAngle: 90,
            endAngle: -270,
            axisLine: {
              lineStyle: {
                color: this.echartsData.color,
                //  color: [[0,'#ccc'],[1,'#ccc']],
                width: 0,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              distance: 12,
              length: 8,
              lineStyle: {
                color: "auto",
                width: 3,
              },
            },
            axisLabel: {
              show: false,
            },
            anchor: {
              show: false,
            },
            pointer: {
              show: false,
            },
            detail: {
              offsetCenter: [0, "-20%"],
              valueAnimation: true,
              precision: 1,
              formatter: "{value}次",
              color: "#F93E3E",
              fontSize: 26,
            },
            title: {
              offsetCenter: [0, "20%"],
              color: "#fff",
              fontSize: 14,
            },
            data: [
              {
                value: this.echartsData.total,
                name: this.echartsData.title,
              },
            ],
          },
        ],
      };

      // setInterval(function () {
      //   chart.setOption(option, true);
      // }, 1000);
      chart.setOption(option, true);
      // 自动调节echarts的大小
      window.addEventListener("resize", () => {
        chart.resize();
      });
      // 销毁调节echarts的大小
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", () => {
          chart.resize();
        });
      });
    },
  },
};
</script>

<style lang="scss">
.echartBox-wrapper {
  width: 100%;
  height: 100%;
}
</style>